<template>
	<view v-if="visible" class="dui-sliding-guide" @click="stopGuide" @touchstart="stopGuide">
		<view class="dui-bt-box">
			<icon class="dui-icon"></icon>
			<view>上滑加载更多</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'duiSlidingGuide',
	data() {
		return {
			visible:true
		};
	},
	emits:['stopGuide'],
	mounted() {
		this.clearAllTimeout();
		uni.pageScrollTo({
			scrollTop: 60,
			duration: 250
		});
		this.timeout1 = setTimeout(()=>{
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 200
			});
		},500)
		this.timeout2 = setTimeout(()=>{
			uni.pageScrollTo({
				scrollTop: 60,
				duration: 250
			});
			this.timeout3 = setTimeout(()=>{
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200
				});
			},500)
		},1500)
	},
	methods: {
		clearAllTimeout(){
			for(let i = 1;i<=3;i++){
				clearTimeout(this['timeout'+i]);
				this['timeout'+i] = null;
			}
		},
		
		stopGuide(){
			this.$emit('stopGuide');
			this.clearAllTimeout();
			this.visible = false;
		}
	},
	beforeDestroy() {
		this.clearAllTimeout();
	}
};
</script>

<style lang="scss" scoped>
//上滑加载更多引导
.dui-sliding-guide {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index:999;
	.dui-bt-box{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: absolute;
		left:0;
		bottom:0;
		width:100%;
		height: 300rpx;
		color:#fff;
		font-weight: bold;
		font-size: 26rpx;
		letter-spacing: 2rpx;
		box-sizing: border-box;
		background: linear-gradient(transparent 0%,rgba(0,0,0,0.5) 85%);
		.dui-icon {
			width: 50rpx;
			height: 50rpx;
			margin-bottom: 15rpx;
			background: url('../../static/arrow.png') no-repeat center/contain;
			animation: slide 0.3s ease-in-out infinite alternate;
		}
	}
	
}

@keyframes slide {
	100%{
		transform: translateY(10rpx);
	}
}
</style>
